<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fragment</title>

</head>
<body>
    <ul id="fragmentList">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
    </ul>
<script>
    //    DocumentFragment 文档碎片(高效批量分更新多个节点)


/*    let lis = document.getElementsByTagName("li");

    let list = Array.prototype.slice.call(lis);//把伪数组转换成数组
//    [].slice.call
    console.log(lis, list);

    list.map((item, index)=>{
//        debugger
        item.innerHTML = "H2004_" + index
    })*/


//  document 文档  包含N个element(元素) 一旦更新任意某个元素 界面都会更新(重绘回流)
//   DocumentFragment 内存中保存N个element的容器对象, 如果更新fragment里面的某个元素(element), 界面不会刷新

    let ul = document.getElementById("fragmentList");

    //1.创建一个fragment容器
    const fragment = document.createDocumentFragment();

    //2.取出所有ul中所有子节点保存到fragment中

    let child;
    while (child = ul.firstChild){ //一个节点 只能有一个父亲
        fragment.appendChild(child) //将child从ul中移除,并且添加到fragment中
    }

    // 3.更新fragment中所有li的文本

    console.log(fragment.childNodes);
    Array.prototype.slice.call(fragment.childNodes).map((node, index)=>{
        console.dir(node);
        if(node.nodeType === 1){ //判断当前子节点是否为元素节点
            node.textContent = "H2004_" + index
        }
    });


    //4.将fragment放入页面中 ul

    ul.appendChild(fragment)





</script>
</body>
</html>